<template>
    <template v-if='props.params != null'>
        <div :class='$style.summary'>
            <div v-for='(item, index) in props.params.summary' :key='index' :class='$style.item'>
                <div :class='$style.paramName'>{{item.name}}</div>
                <div :class='$style.paramValue'>{{item.value}}</div>
            </div>
        </div>
        <div :class='$style.chart'>
            <v-chart :option='option' />
        </div>
    </template>
    <div class='p-r' v-else>
        <a-skeleton active />
    </div>
</template>

<script lang='ts' setup>
    import { profitSummaryApi } from '@/api/backTest'
    import { TRANS } from '@/constant'
    import { computed, reactive } from 'vue'

    const props = withDefaults(defineProps<{params : any}>(), {
        params : null
    })

    const option = computed(() => {
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            // grid : {
            //     top : '20px',
            //     right : '30px',
            //     bottom : '30px',
            //     left : '30px'
            // },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            xAxis: {
                type: 'category',
                data: props.params.chart.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                    {
                        type: 'line',
                        name: '基准收益',
                        data : props.params ?props.params.chart.series[0] : []
                    },
                    {
                        type: 'line',
                        name: '策略收益',
                        data : props.params ? props.params.chart.series[1] : []
                    }
                ]
        };

        return option
    })

    // const rows = reactive<any[]>([])

    // profitSummaryApi(props.params).then(data => {

    //     for(let k in data) {
    //         if(['benchmark_cum_returns', 'strategy_cum_returns', 'status'].includes(k)) continue
    //         rows.push({name : TRANS[k], value : data[k]})
    //     }

    //     for(let time in data.benchmark_cum_returns) {
    //       series[0].data.push([time, data.benchmark_cum_returns[time]])
    //     } 

    //     for(let time in data.strategy_cum_returns) {
    //       series[1].data.push([time, data.strategy_cum_returns[time]])
    //     } 

    //     xAxis.push(...Object.keys(data.strategy_cum_returns))

        

    // })

    


</script>



<style scoped lang='scss' module>
    .summary{
        display: grid;
        grid-template-columns:repeat(10, 1fr);
        gap: 20px;
        text-align: center;
        .paramName{
            font-size: 12px;
            color: var(--ant-primary-color);
        }
        .paramValue{
            font-size: 14px;
            font-weight: 700;
            color: #666;
            margin-top: 5px;
        }
    }

    .chart{
        margin-top: 20px;
        height: 400px;
    }
</style>